
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字无缝滚动</title>
    <style>
        *{
            margin: 0;
            padding: 0
        }
        #wrapper{
            overflow:hidden;
            height:30px;
            width:500px;
            background:#ccc;
            color:#006600;
            margin: 100px auto;
            text-align: center;
        }

        .wrap-annouce{
            width: 120px;
            height: 20px;
            overflow: hidden;
        }

        .wrap-annouce1{
            width: 245px;
            height: 20px;
        }

        .annouce-text{
            display: inline-block;
            width: 120px;
            height: 20px;
        }

        .annouce-text2{
            display: inline-block;
            width: 120px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
    <div id="demo1">
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
        <p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>
    </div>
    <div id="demo2">
    </div>
</div>
<div class="wrap-annouce">
    <div class="wrap-annouce1">
        <span class="annouce-text">欢迎光临！公告:热烈庆祝平安银行进驻明星科技！</span>
        <span class="annouce-text2">欢迎光临！公告:热烈庆祝平安银行进驻明星科技！</span>
    </div>
</div>
<script>
    var speed = 80;  // 可自行设置文字滚动的速度

    var wrapper = document.getElementById('wrapper');
    var demo1 = document.getElementById('demo1');
    var demo2 = document.getElementById('demo2');

    demo2.innerHTML=demo1.innerHTML   //克隆demo1为demo2
    function Marquee(){
        console.log(wrapper.scrollTop)
        console.log(demo2.offsetHeight)
        if(demo2.offsetHeight-wrapper.scrollTop<=0)  //当滚动至demo1与demo2交界时
            wrapper.scrollTop-=demo1.offsetHeight    //demo跳到最顶端
        else{
            wrapper.scrollTop++   //如果是横向的 将 所有的 height top 改成 width left
        }
    }

    var MyMar=setInterval(Marquee,speed)  //设置定时器
    wrapper.οnmοuseοver=function() {clearInterval(MyMar)}   //鼠标移上时清除定时器达到滚动停止的目的
    wrapper.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}  //鼠标移开时重设定时器
</script>

</body>
</html>
